<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Ajax请求1</title>
    <script th:src="@{/script/vue.js}"></script>
    <script th:src="@{/script/axios.min.js}"></script>
</head>
<body>
<div id="app">
    <!--阻止表单的默认提交行为-->
    <a href="javascript:void(0)" @click="ajaxDemo1()">Ajax请求1</a>
</div>
<div id="app2">
    <a href="javascript:void(0)" @click="ajaxDemo2()">Ajax传递实体类</a>
</div>
<h3>Ajax请求:传递实体类带级联属性(params)</h3>
<div id="app3">
    <a href="javascript:void(0)" @click="ajaxDemo3()">Ajax传递实体类带级联属性(params)</a>
</div>
<h3>Ajax请求:传递实体类带级联属性(json)</h3>
<div id="app4">
    <a href="javascript:void(0)" @click="ajaxDemo4()">Ajax传递实体类带级联属性(data)</a>
</div>
<h3>Ajax请求:返回实体类型参数(JSON)</h3>
<div id="app5">
    <a href="javascript:void(0)" @click="ajaxDemo5()">Ajax返回实体类</a>
</div>

</body>
<script>
    let vm = new Vue({
        el: "#app",
        data: {

        },
        methods: {
            ajaxDemo1() {
                axios({
                    method:"post",
                    url:"[[@{/ajax/ajaxDemo1}]]",
                    params:{
                        empId:10,
                        empName:"张三",
                        empSalary:456.78
                    }
                }).then((response) => {
                    //前端页面日志
                    console.log(response.data);
                    console.log(response.status);
                    console.log(response.statusText);
                    console.log(response.config.url);
                }).catch((error) => {
                    console.log(error.response.status);
                    console.log(error.response.statusText);
                    console.log(error.response.data);
                }).finally(() => {
                    console.log("finally执行结束了");
                })
            }
        }
    });

    let vm2 = new Vue({
        el: "#app2",
        data: {

        },
        methods: {
            ajaxDemo2() {
                axios({
                    method:"post",
                    url:"[[@{/ajax/ajaxDemo2}]]",
                    params:{
                        empId:10,
                        empName:"张三",
                        empSalary:456.78
                    }
                }).then((response) => {
                    //前端页面日志
                    console.log(response.data);
                    console.log(response.status);
                    console.log(response.statusText);
                    console.log(response.config.url);
                }).catch((error) => {
                    console.log(error.response.status);
                    console.log(error.response.statusText);
                    console.log(error.response.data);
                }).finally(() => {
                    console.log("finally执行结束了");
                })
            }
        }
    });

    let vm3 = new Vue({
        el: "#app3",
        data: {

        },
        methods: {
            ajaxDemo3() {
                axios({
                    method:"post",
                    url:"[[@{/ajax/ajaxDemo3}]]",
                    params:{
                        "empId":10,
                        "empName":"张三",
                        "empSalary":456.78,
                        "hireDate":"2024-3-23",
                        // 错误写法
                        //"hireDateTime":"2024-3-23 7:59:10"
                        //严格按照@DateTimeFormat的pattern格式,个位数的记得十位补零.
                        "hireDateTime":"2024-03-23 07:59:10:111",
                        "dept.deptno":101,
                        "dept.dname":"研发部"
                    }
                }).then((response) => {
                    //前端页面日志
                    console.log(response);
                    console.log(response.data);
                }).catch((error) => {
                    //错误日志
                    console.log(error.response);
                    console.log(error.response.status);
                }).finally(() => {
                    console.log("finally执行结束了");
                })
            }
        }
    });

    let vm4 = new Vue({
        el: "#app4",
        data: {

        },
        methods: {
            ajaxDemo4() {
                axios({
                    method:"post",
                    url:"[[@{/ajax/ajaxDemo4}]]",
                    data:{
                        "empId":10,
                        "empName":"张三",
                        "empSalary":456.78,
                        "hireDate":"2024-03-23",
                        "hireDateTime":"2024-03-23 10:31:40:111",
                        "dept":{
                            "deptno":10,
                            "dname":"教学部"
                        }
                    }
                }).then((response) => {
                    console.log(response.data);
                }).catch((error) => {
                    console.log(error.response.data);
                }).finally(() => {
                    console.log("finally 执行结束了...");
                })
            }
        }
    });

    let vm5 = new Vue({
        el: "#app5",
        data: {

        },
        methods:{
            ajaxDemo5() {
                axios({
                    method:"post",
                    url:"[[@{/ajax/ajaxDemo5}]]"
                }).then((response) => {
                    console.log(response.data);
                }).catch((error) => {
                    console.log(error);
                    console.log(error.response.data);
                    console.log(error.response.status);
                }).finally(() => {
                    console.log("finally被执行了...");
                })
            }
        }
    });


</script>
</html>